<template>
  <div class="bottom-bar">
    <div>
      <router-link to="/home">
        <span class="iconfont icon-index-copy"></span>
        <div>首页</div>
      </router-link>
    </div>
    <div>
      <router-link to="/classify">
        <span class="iconfont icon-leimupinleifenleileibie-copy"></span>
        <div>分类</div>
      </router-link>
    </div>
    <div>
      <router-link to="/home">
        <span class="iconfont icon-cart"></span>
        <div>购物车</div>
      </router-link>
    </div>
    <div>
      <router-link to="/home">
        <span class="iconfont icon-lianxiren"></span>
        <div>我的</div>
      </router-link>
    </div>
  </div>
</template>
<script>
export default {
  name: "Search"
};
</script>
<style lang="scss" scoped>
@import "../../font/iconfont.css";
$base: 50;
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #f2f2f2;
  display: flex;
  justify-content: space-between;
  padding: 25rem / $base;
  height: 70rem / $base;
  z-index: 100;
  color: #797979;
  padding: 10rem / $base 40rem / $base 40rem / $base 40rem / $base;
  div {
    text-align: center;
    opacity: 0.8;
    font-weight: b;
    span {
      font-size: 45rem / $base;
    }
    div {
      font-size: 25rem / $base;
    }
  }
}
</style>